<template>
	<view class="content">
		<view class="introduction" v-for="huodong in huodongs" :key="huodong.id">
			<view class="avatar">
				<img :src="huodong.img" alt="" style="width: 400rpx; height: 200rpx;" />
			</view>
			<view class="textContent">
				<p class="_p">{{huodong.content1}}</p>
				<p class="_p">{{huodong.content2}}</p>
				<p class="_p">{{huodong.content3}}</p>
				<p class="_p">{{huodong.content4}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				huodongs: [{
					id: 1,
					img: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/%E6%B4%BB%E5%8A%A8/%E6%96%87%E8%89%BA%E8%8A%82.png',
					content1: '内容：校园文艺节是学校每年最重要的文化活动之一，旨在展示学生的艺术才华和创造力。活动包括舞蹈表演、戏剧演出、诗歌朗诵、绘画展览等多个环节。学生们通过自编自演的节目，展示他们在音乐、舞蹈、戏剧、美术等方面的才华。',
					content2: '举办日期：每年春季学期的末尾，即X月中旬。',
					content3: '规模：全校师生均可参与，每年参与人数达到千人以上，是全校性的大型活动。',
					content4: '意义：校园文艺节不仅为学生提供了一个展示自我、锻炼能力的平台，也丰富了校园文化生活，提升了学生的审美能力和艺术修养。同时，通过文艺节的举办，也促进了学校与社区的文化交流，提升了学校的文化影响力。'
				}, {
					id: 2,
					img: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/%E6%B4%BB%E5%8A%A8/%E6%AD%8C%E6%89%8B%E5%A4%A7%E8%B5%9B.png',
					content1: '内容：校园歌手大赛是一场以歌唱为主要形式的比赛活动。参赛者可以是个人也可以是团队，通过演唱自选歌曲展示自己的音乐才华。比赛设有多个环节，包括初赛、复赛和决赛，最终评选出最佳歌手和优秀歌手。',
					content2: '举办日期：每年冬季学期的初期，即X月初。',
					content3: '规模：全校学生均可参与，每年参赛人数达到几百人，是深受学生喜爱的活动之一。',
					content4: '意义：校园歌手大赛为学生提供了一个展示音乐才华的平台，让他们能够感受到音乐的魅力和表现力。同时，比赛也促进了学生之间的交流和互动，增强了校园文化氛围。此外，通过参与比赛，学生们也能够锻炼自己的表演能力和自信心，为未来的成长和发展打下良好的基础。'
				}, {
					id: 3,
					img: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/%E6%B4%BB%E5%8A%A8/%E7%A7%91%E6%8A%80%E5%88%9B%E6%96%B0%E6%AF%94%E8%B5%9B.png',
					content1: '内容：科技创新大赛鼓励学生发挥创新思维，将科技知识应用于实际问题解决中。参赛者需提交自己的科技作品或创新方案，经过初评、复评和终评，最终评选出最具创新性和实用性的作品。',
					content2: '举办日期：每年春季学期的中期，即X月中旬。',
					content3: '规模：全校学生均可参与，每年提交的作品数量众多，涵盖多个科技领域。',
					content4: '意义：科技创新大赛不仅培养了学生的创新意识和实践能力，也推动了学校科技教育的发展。通过参与比赛，学生们能够深入了解科技知识，掌握科技应用技能，为未来的科技创新事业奠定基础。同时，大赛的举办也促进了学校与社会的科技交流，提升了学校的科技影响力。'
				}, {
					id: 4,
					img: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/%E6%B4%BB%E5%8A%A8/%E8%AF%BB%E4%B9%A6%E8%8A%82.png',
					content1: '内容：读书节活动旨在激发学生的阅读兴趣，培养良好的阅读习惯。活动包括图书展览、读书分享会、阅读竞赛等多个环节。学生们可以通过参与活动，了解更多的书籍和阅读方法，享受阅读的乐趣。',
					content2: '举办日期：每年秋季学期的末尾，即X月底。',
					content3: '规模：全校师生均可参与，活动覆盖多个年级和班级，是推广阅读文化的重要活动。',
					content4: '意义：读书节活动有助于营造浓厚的阅读氛围，提升学生的阅读能力和文化素养。通过参与活动，学生们能够拓宽视野，增长知识，培养审美情趣和人文精神。同时，读书节也促进了学校与家庭之间的文化交流，推动了全民阅读活动的深入开展。'
				}, {
					id: 5,
					img: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/%E6%B4%BB%E5%8A%A8/%E8%BF%90%E5%8A%A8%E4%BC%9A.png',
					content1: '内容：校园运动会是一场集体育竞技、健身娱乐于一体的综合性活动。比赛项目包括田径、篮球、足球、乒乓球等多个项目，既有个人项目也有团体项目。学生们在比赛中展现自己的运动技能，体验运动的快乐。',
					content2: '举办日期：每年秋季学期的中期，即X月下旬。',
					content3: '规模：全校师生均可参与，根据不同项目的特点，参赛人数从几十到几百不等。',
					content4: '意义：校园运动会不仅锻炼了学生的身体，提高了他们的运动技能，也增强了学生们的团队合作精神和竞争意识。同时，运动会的举办也促进了学校体育事业的发展，提升了学校的体育水平。'
				}]

			}
		},
		methods: {
			getJwtToken() {
				try {
					return wx.getStorageSync('jwt_token');
				} catch (e) {
					// 处理获取令牌失败的逻辑，比如返回 null 或抛出错误  
					return null;
				}
			},
			sendRequestWithToken(url, method) {
				const token = this.getJwtToken();
				if (token) {
					wx.request({
						url: url,
						method: method,
						header: {
							'token': token
						},
						success: (res) => {
							if (res.data.code === 1 && res.data.msg === 'success') {
								this.teachers = res.data.data;
							} else if (res.data.code === 0) {
								uni.showToast({
									title: '登录信息有误',
									icon: null
								});
								this.goPage(7);
								console.error('未登录', res.data.data);
							}
						},
						fail: (error) => {
							uni.showToast({
								title: '网络请求失败',
								icon: 'none'
							});
							console.error('请求失败', error);
						}
					});
				} else {

				}
			},
			showIntroduction() {
				const url = `http://localhost:8080/teacher/introduction`;
				const method = 'GET';
				this.sendRequestWithToken(url, method)
			},
			onLoad() {
				this.showIntroduction();
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
		flex-direction: column;
		padding-top: 30rpx;
	}

	.introduction {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		height: auto;
		flex-direction: column;
		background-color: #ececec;
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-radius: 30rpx;
	}

	.avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		height: 200rpx;
	}

	.textContent {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-bottom: 20rpx;
		width: 90%;
		height: auto;
	}
	._p{
		display: flex;
		align-items: center;
		width: 100%;
		font-size: 25rpx;
		font-family: AliMamaShuHei;
		text-indent: 2em;
	}
</style>